import React, { Component } from 'react';

//知识点01:  react 中的事件对象为合成的事件对象, 是对原生的浏览器的事件进行的一个封装,
// 然后, 合成事件没有浏览器的兼容性

// 方式2: 绑定事件 --缺点: 无法操作类成员属性
// const handlerClick = (e) => {
//     // 不需要做兼容处理
//     console.log('你点我了');
//     console.log(e);
//     // 输出获取 num
//     console.log('num', this.num);
//     console.log(this.add(100, 200));
// }

class Mycls extends Component {
    num = 100
    add(a, b) {
        return a + b
    }
    // 方式3-事件绑定: react中事件绑定默认是没有this指向的, 常用第三种方式
    handlerClick = (e) => {
        // 不需要做兼容处理
        console.log('你点我了');
        console.log(e);
        // console.log('num', this.num);
        // console.log(this.add(100, 200));
        console.log(this);
    }
    render() {
        // this 指向实例对象
        // 方式1-定义事件: 可以操作类成员属性
        // const handlerClick = (e) => {
        //     // 不需要做兼容处理
        //     console.log('你点我了');
        //     console.log(e);

        //     // 输出获取 num
        //     console.log('num', this.num);
        //     console.log(this.add(100, 200));
        // }
        return (
            <div>
                我是类组件
                <p onClick={this.handlerClick}>点击事件</p>
            </div>
        );
    }
}

export default Mycls;
